<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
  <script>
    const { reactive, effect } = VueReactivity;
    // let state = reactive({
    //   name: 'tom',
    //   age: 23,
    //   arr: [{name: 'XXX'}, 2, 3]
    // });

    // const app = document.querySelector('#app');

    // // 收集 effect 回调函数中收集的响应式数据的依赖
    // effect(() => {
    //   // state.other = '??????'
    //   app.innerHTML = state.name + '已经' + state.age + '岁了';
    // })

    // setTimeout(() => {
    //   state.name = "jerry";
    //   state.AAA = '新增属性';
    //   state.arr.push('数组新增值')
    //   state.arr[0].name = '数组修改值'
    //   state.arr[0].age = 33
    //   state.arr[2] = 'haha'
    // }, 1000)


    // let state = reactive({
    //   name: 'tom',
    //   age: 23,
    //   arr: [1, 2, 3]
    // });

    // const app = document.querySelector('#app');

    // // 收集 effect 回调函数中收集的响应式数据的依赖
    // effect(() => {
    //   alert(state.arr.length)
    //   app.innerHTML = state.arr[2] + state.arr.length;
    // })

    // setTimeout(() => {
    //   state.arr.length = 1;
    // }, 1000)


    let state = reactive({
      name: 'tom',
      age: 23,
      arr: [1, 2, 3]
    });

    const app = document.querySelector('#app');

    // 收集 effect 回调函数中收集的响应式数据的依赖
    effect(() => {
      app.innerHTML = state.arr;
    })

    setTimeout(() => {
      state.arr[50] = 1;
    }, 1000)
    
  </script>
</body>
</html>